<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
    <script>
        function addEmp() {
            // 创建tr
            let trChild = document.createElement("tr");
            // 创建td
            let nameTd = document.createElement("td");
            let salaryTd = document.createElement("td");
            let operateTd = document.createElement("td");
            // 获取用户输入的数据
            let name = document.getElementById("name").value;
            let salary = document.getElementById("salary").value;
            // 创建td的文本节点
            let nameText = document.createTextNode(name);
            let salaryText = document.createTextNode(salary);
            // 创建超链接
            let aChild = document.createElement("a");
            let aText = document.createTextNode("删除");
            // 将超链接文本添加到超链接中
            aChild.appendChild(aText);
            // 设置超链接属性
            aChild.href = "javascript:;";
            aChild.onclick = function () {
                // 此处可以通过this表示触发时间的元素
                this.parentNode.parentNode.remove();
            }

            // 将td的文本添加到td中
            nameTd.appendChild(nameText);
            salaryTd.appendChild(salaryText);
            operateTd.appendChild(aChild);

            // 将td添加到tr中
            trChild.appendChild(nameTd);
            trChild.appendChild(salaryTd);
            trChild.appendChild(operateTd);

            // 将tr添加到表格中
            let t = document.getElementById("t");
            t.appendChild(trChild);
        }
    </script>
</head>
<body>
<h2>添加员工信息</h2>
姓名:<input type="text" id="name"><br>
工资:<input type="text" id="salary"><br>
<button onclick="addEmp()">添加</button>
<hr>
<!--
    需求一:添加操作
        在表格中,初始没有任何员工
        用户在上面的表单区域中输入对应的姓名和工资
        点击添加后会在表格中添加一行数据,该数据对应的是用户输入的数据
    需求二:删除操作
        当用户点击了改行操作列的删除链接后,该行员工信息会从表格中移除
-->
<table id="t" border="1" style="width: 500px;background-color: #dddddd;">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
    <!--    <tr>-->
    <!--        <td>admin</td>-->
    <!--        <td>9000</td>-->
    <!--        <td>-->
    <!--            <a href="javascript:;">删除</a>-->
    <!--        </td>-->
    <!--    </tr>-->
</table>
</body>
</html>